<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="plane.css"/>
	</head>
	<body>
		<div id="body_main" class="main">
			<ul id="options" class="options">
				<li value="1">100</li>
				<li value="2">75</li>
				<li value="3">50</li>
				<li value="4">25</li>
			</ul>
		</div>
	</body>
</html>
<script>
	window.onload = function(){
		new Engine().init();
	}
	function Engine(){
		if(!Engine.obj){
			Engine.obj = {
				ele : document.getElementById("body_main"),
				olist : document.getElementsByTagName("li"),
				init : function(){
					var that = this;
					for(var i = 0;i < this.olist.length;i ++){
						this.olist[i].onclick = function(){
							this.parentNode.remove(this);
							that.loadPage();
							that.frequecy = this.index;
						}
					}
				},
				loadPage : function(){
					this.logo = createEle("div","logo");
					appendBody(this.logo);
					this.loading = createEle("div","loading");
					appendBody(this.loading);
					var that = this;
					var index = 1;
					this.timer = setInterval(function(){
						that.loading.style.background = "url(images/loading"+(index ++ % 3 + 1)+".png) no-repeat";
					},500);
					var positionY = 0;
					setInterval(function(){
						that.ele.style.backgroundPositionY = ++ positionY + "px";
					},30);
					setTimeout(function(){
						that.logo.remove();
						that.loading.remove();
						clearInterval(that.timer);
						that.startGame();
					},4000);
				},
				startGame : function(){
					var myPlane = new Plane();
					myPlane.init();
					myPlane.fire(this.frequecy);
					this.createEnemy();
				},
				createEnemy : function(){
					setInterval(function(){
						Math.random() > 0.7 ? new Enemy(0).init() : "";
					},1000);
					setInterval(function(){
						Math.random() > 0.5 ? new Enemy(1).init() : "";
					},3000);
					setInterval(function(){
						Math.random() > 0.3 ? new Enemy(2).init() : "";
					},5000);
				}
			}
		}
		return Engine.obj;
	}
	function Plane(){
		if(!Plane.obj){
			Plane.obj = {
				ele : createEle("div","my-warplain"),
				bullet : [],
				init : function(){
					appendBody(this.ele);
					this.ele.style.left = document.documentElement.clientWidth/2 - this.ele.offsetWidth /2 + "px";
					this.ele.style.top = document.documentElement.clientHeight - this.ele.offsetHeight + "px";
					this.sport();
				},
				sport : function(){
					var body_main = document.getElementById("body_main");
					var that = this;
					document.onmousemove = function(evt){
						var e = evt || window.event;
						 var left = e.pageX - that.ele.offsetWidth/2;
						 var top = e.pageY - that.ele.offsetHeight/2;
						 if(left <= body_main.offsetLeft){
						 	left = body_main.offsetLeft;
						 }else if(left >= body_main.offsetLeft + body_main.offsetWidth - that.ele.offsetWidth){
						 	left = body_main.offsetLeft + body_main.offsetWidth - that.ele.offsetWidth;
						 }
						 that.ele.style.left = left + "px";
						 that.ele.style.top = top + "px";
					}
				},
				fire : function(frequecy){
					var defaultFrequecy = 150;
					switch(frequecy){
						case 0 : defaultFrequecy = 600; break;
						case 1 : defaultFrequecy = 400; break;
						case 2 : defaultFrequecy = 150; break;
						case 3 : defaultFrequecy = 50;
					}
					var id = 0;
					var that = this;
					setInterval(function(){
						var bullet = new Bullet(id);
						that.bullet.push(bullet);
						bullet.init();
						id ++; 
					},defaultFrequecy);
				}
			}
		}
		return Plane.obj;
	}
	function Bullet(id){
		var obj = new Object();
		obj.id = id;
		obj.ele = createEle("div","bullet");
		obj.init = function(){
			var myPlane = new Plane();
			this.ele.id = this.id;
			appendBody(this.ele);
			this.ele.style.left = myPlane.ele.offsetLeft + myPlane.ele.offsetWidth /2 - this.ele.offsetWidth/2 + "px";
			this.ele.style.top = myPlane.ele.offsetTop - this.ele.offsetHeight + "px";
			this.sport();
		};
		obj.sport = function(){
			this.timer = setInterval(function(){
				this.ele.style.top = this.ele.offsetTop - 15 + "px";
				if(this.ele.style.top <= 15){
					this.boom();
				}
			}.bind(this),50);
		};
		obj.boom = function(){
			var myPlane = new Plane();
			this.ele.className = "bullet_die";
			clearInterval(this.timer);
			setTimeout(function(){
				this.ele.remove();
				for(var i = 0;i < myPlane.bullet.length;i ++){
					if(this.ele.id == myPlane.bullet[i].id){
						myPlane.bullet.splice(i,1);
					}
				}
			}.bind(this),50);
		}
		return obj;
	}
	function Enemy(type){
		var obj = new Object();
		obj.type = type;
		obj.init = function(){
			switch(this.type){
				case 0 : this.ele = createEle("div","enemy-small");
				         this.ps = 1;
				         this.speed = 20;
				         break;
				case 1 : this.ele = createEle("div","enemy-middle");
				         this.ps = 5;
				         this.speed = 10;
				         break;
				case 2 : this.ele = createEle("div","enemy-large");
				         this.ps = 20;
				         this.speed = 5;
			};
			appendBody(this.ele);
			this.position();
		};
		obj.position = function(){
			var body_main = document.getElementById("body_main");
			this.ele.style.left = randomInt(body_main.offsetLeft,body_main.offsetLeft + body_main.offsetWidth - this.ele.offsetWidth) + "px";
			this.ele.style.top = 0;
			this.sport();
		};
		obj.sport = function(){
			this.timer = setInterval(function(){
				this.ele.style.top = this.ele.offsetTop + this.speed + "px";
				if(this.ele.offsetTop >= document.documentElement.clientHeight){
					this.ele.remove();
					clearInterval(this.timer);
				};
				this.collision();
			}.bind(this),100);
		};
		obj.collision = function(){
			var myPlane = new Plane();
			for(var i = 0;i < myPlane.bullet.length; i ++){
				if(!(myPlane.bullet[i].ele.offsetLeft + myPlane.bullet[i].ele.offsetWidth < this.ele.offsetLeft || this.ele.offsetLeft + this.ele.offsetWidth < myPlane.bullet[i].ele.offsetLeft)){
					if(!(myPlane.bullet[i].ele.offsetTop + myPlane.bullet[i].ele.offsetHeight < this.ele.offsetTop || this.ele.offsetTop + this.ele.offsetHeight < myPlane.bullet[i].ele.offsetTop)){
						myPlane.bullet[i].boom();
						this.ps --;
						if(this.ps <= 0){
							this.ele.remove();
						}
					}
				}
			}
		}
		return obj;
	}
	function createEle(target,className){
		var ele = document.createElement(target);
		ele.className = className;
		return ele;
	}
	function appendBody(ele){
		document.body.appendChild(ele);
	}
	Element.prototype.remove = function(){
		this.parentNode.removeChild(this);
	}
	function randomInt(min,max){
		return Math.floor(Math.random()*(max-min +1 ) + min);
	}
</script>